<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core"  prefix="c"%>
<%@ taglib prefix="f" uri="http://www.springframework.org/tags/form"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
<%
	String path=request.getContextPath();
%>    
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
	<link href="/resources/css/bootstrap-4.3.1/css/bootstrap.css" rel="stylesheet">
	<script type="text/javascript" src="/resources/js/jquery-3.2.1/jquery.js"></script>
	<script type="text/javascript" src="/resources/js/jqueryvalidate/jquery.validate.js"></script>
	<script type="text/javascript" src="/resources/js/jqueryvalidate/localization/messages_zh.js"></script>
	
	<script type="text/javascript" src="/resources/css/bootstrap-4.3.1/js/bootstrap.js"></script>
</head>
<body>

	
	<!-- Image and text -->
	<!--开始导航条  -->
	<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
		<a class="navbar-brand" href="/">
		   <img src="/resources/js/images/logo.png" width="30" height="30" class="d-inline-block align-top" alt="">
		</a>
		<a class="navbar-brand" href="#">首页</a>
		<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
		  <span class="navbar-toggler-icon"></span>
		</button>
	
	  <div class="collapse navbar-collapse" id="navbarSupportedContent">
	    <ul class="navbar-nav mr-auto">
	      <li class="nav-item active">
	        <a class="nav-link" href="#">最热新闻<span class="sr-only">(current)</span></a>
	      </li>
	      
	      
	      <li class="nav-item">
	        <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">功能开发中</a>
	      </li>
	    </ul>
	    
	    <!--搜索框开始  -->
	    <%-- <form class="form-inline my-2 my-lg-0">
	      <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
	      <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
	    </form> --%>
	    <!--搜索框结束  -->
	    <ul  class="navbar-nav">
	    <c:choose>
	    	<c:when test="${empty sessionScope.userKey }">
	    		<li class="nav-item">
	       		 <a class="nav-link" href="/user/login">登陆</a>
	      		</li>
	    	</c:when>
	    	<c:otherwise>
		    	<li class="nav-item dropdown">
			        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
			          	个人中心
			        </a>
			        <div class="dropdown-menu" aria-labelledby="navbarDropdown">
			          <a class="dropdown-item" href="#">设置</a>
			          <a class="dropdown-item" href="/user/home">个人中心</a>
			          
			          <a class="dropdown-item" href="#">登出</a>
			        </div>
     			 </li>
	    	</c:otherwise>
	    </c:choose>
	    </ul>
	  </div>
	</nav>
	<!--结束导航条  -->
	
	<!--中间的部分  -->
	<div class = "container-fluid" style = "margin-top:20px">
		<div class = "row">
			<!--左侧的部分  -->
			<div class = "col-md-2">
			<!--频道的名字：channelList  -->
				<div class="list-group">
				 	<c:forEach items="${channelList }" var="cl">
				 		 <a href="/articleShow?channelId=${cl.id }" class="list-group-item list-group-item-action">${cl.name }</a>
					</c:forEach>
				</div>
			</div>
			<!--左侧的部分  -->
			<!--轮播图的部分  -->
			<div class = "col-md-6">
				<div id="carouselExampleCaptions" class="carousel slide" data-ride="carousel">
					  <ol class="carousel-indicators">
					    <li data-target="#carouselExampleCaptions" data-slide-to="0" class="active"></li>
					    <li data-target="#carouselExampleCaptions" data-slide-to="1"></li>
					    <li data-target="#carouselExampleCaptions" data-slide-to="2"></li>
					  </ol>
					  <div class="carousel-inner">
					    <div class="carousel-item active">
					      <img src="/resources/css/img/23.jpg" class="d-block w-100" alt="...">
					      <div class="carousel-caption d-none d-md-block">
					        <h5>做好准备，机会稍纵即逝</h5>
					        <p>加油吧骚年！</p>
					      </div>
					    </div>
					    <div class="carousel-item">
					      <img src="/resources/css/img/24.jpg" class="d-block w-100" alt="...">
					      <div class="carousel-caption d-none d-md-block">
					        <h5>马上要开始面试了，你紧张吗？</h5>
					        <p>面试的5个小技巧</p>
					      </div>
					    </div>
					    <div class="carousel-item">
					      <img src="/resources/css/img/25.jpg" class="d-block w-100" alt="...">
					      <div class="carousel-caption d-none d-md-block">
					        <h5>欢迎关注今日趣闻</h5>
					        <p>过年了你的新年愿望是什么呢？</p>
					      </div>
					    </div>
					  </div>
					  <a class="carousel-control-prev" href="#carouselExampleCaptions" role="button" data-slide="prev">
					    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
					    <span class="sr-only">Previous</span>
					  </a>
					  <a class="carousel-control-next" href="#carouselExampleCaptions" role="button" data-slide="next">
					    <span class="carousel-control-next-icon" aria-hidden="true"></span>
					    <span class="sr-only">Next</span>
					  </a>
					</div>
			
			<!--中间的新闻  -->
			<!--域中的名字：hotList  -->
				<c:forEach items="${hotList.list }" var="hl">
					<div class="card" style = "margin-top:10px;">
					  <div class="card-header">
					    <a href="/article/showDetails?id=${hl.id }">${hl.title }</a>
					  </div>
					  <div class="card-body">
					    <blockquote class="blockquote mb-0">
					      <p>${hl.author.username }</p>
					      <footer class="blockquote-footer">频道：${hl.channel.name }种类：${hl.category.name } </footer>
					    </blockquote>
					  </div>
					</div>
				</c:forEach>
				
				<!--分页  -->
					<nav aria-label="Page navigation example">
					  <ul class="pagination">
					    <li class="page-item">
					      <a class="page-link" href="/" aria-label="Previous">
					        <span aria-hidden="true">&laquo;</span>
					      </a>
					    </li>
					    <c:forEach begin="${hotList.pageNum-2>1?hotList.pageNum-2:1 }"
					    	 end="${hotList.pageNum+2<hotList.pages?hotList.pageNum+2:hotList.pages }" step="1" var = "page">
					   	 	<li class="page-item"><a class="page-link" href="/?pageNum=${page }">${page }</a></li>
					   </c:forEach>
					    <li class="page-item">
					      <a class="page-link" href="/?pageNum=${hotList.pages }" aria-label="Next">
					        <span aria-hidden="true">&raquo;</span>
					      </a>
					    </li>
					  </ul>
					</nav>				                                                                                                                  
				<!--分页  -->
				
			</div>
			<!--轮播图的部分  -->
			<!--右侧的部分  -->
			<!--域中的文章：articleListByCreated  -->
			<div class = "col-md-4">
			<c:forEach items="${articleListByCreated }" var="abc">
				<div class="card" style="width: 18rem;">
				  <div class="card-body">
				    <h5 class="card-title">${abc.title }</h5>
				    <h6 class="card-subtitle mb-2 text-muted">${abc.author.username }</h6>
				    <p class="card-text">频道：${abc.channel.name }种类：${abc.category.name }</p>
				    <a href="#" class="card-link">查看详情</a>
				    
				  </div>
				</div>	
			</c:forEach>
				
			</div>
			<!--右侧的部分  -->
		</div>
	</div>
	<!--中间的部分  -->
	
	
	<!--尾部  -->
	<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
		<div class = "collapse navbar-collapse justify-content-center">
			<c:forEach items="${links }" var="link">
				<a href = "${link.url }" target="_blank">${link.name }</a> &emsp;&emsp;
			</c:forEach>
		</div>
	</nav>
	<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
		<p class = "collapse navbar-collapse justify-content-center"><font color = "white">开源项目，欢迎指导</font></p>		
	</nav >
	
	<!--尾部  -->
</body>
</html>